<template>
  <div class="block">
    <el-date-picker
      v-model="value"
      type="daterange"
      align="right"
      unlink-panels
      value-format="yyyy-MM-dd"
      @change="handleDateChange(value)"
      range-separator="至"
      start-placeholder="开始日期"
      end-placeholder="结束日期"
      :picker-options="pickerOptions">
    </el-date-picker>
  </div>
</template>

<script>
import moment from "moment";

export default {
  name:'DateRange',
  props:['handleDateChange'],
  data() {
    return {
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }]
      },
      value: [moment(moment().startOf("month")).format('YYYY-MM-DD'),moment(moment().endOf("month")).format('YYYY-MM-DD'),],
    };
  }
};
</script>
